<template>
	<view class="uni-flex uni-row valves" v-if="valves.length">
		<template v-for="valve in valves">
			<view class="uni-flex uni-column valve">
				<text class="name">{{valve | filterSensorName}}</text>
				<!-- <image class="switch" @click="changeSwitchState(valve)" :src="valve.state ? switchOnPath : switchOffPath" mode=""></image> -->
				<vswitch
					class="switch"
					:value="valve.state"
					:loading="valve.loading"
					:disabled="valve.loading"
					@click="changeSwitchState(valve)"
					></vswitch>
			</view>
		</template>
		<template v-for="valve in getEmptyNumber(valves)">
			<view class="empty"></view>
		</template>
	</view>
</template>

<script>
	import vswitch from '@/components/vswitch.vue'
	export default{
		data(){
			return {
				// switchOnPath: require('@/static/image/mipmap-xhdpi/on.png'),
				// switchOffPath: require('@/static/image/mipmap-xhdpi/off.png'),
				loading: []
			}
		},
		props:{
			valves: {
				type: Array,
				default: () => [],
				validator(value) {
					let result = true;
					if(value instanceof Array){
						for(let i = 0; i < value.length; i++){
							let obj = value[i];
							if(obj instanceof Object){
								result &= typeof obj.index === 'number';
								result &= typeof obj.name === 'string';
								result &= typeof obj.state === 'boolean';
								
								if(!result) return false;
							} else {
								return false;
							}
						}
					}
					return result;
				}
			},
			device: Object
		},
		methods:{
			getEmptyNumber(valves){
				let num = valves.length%4
				return num ? 4-num : num;
			},
			changeSwitchState(valve){
				this.$emit("change", valve, this.device)
			}
		},
		filters:{
			filterSensorName(valves){
				return valves.name
			},
			filterSensorValue(state){
				return state === 0x7fff ? "------" : state
			}
		},
		components:{
			vswitch
		}
	}
</script>

<style lang="scss" scoped>
.valves{
	flex-wrap: wrap;
	.valve, .empty{
		flex: 23%;
		height: 117.64rpx;
		text-align: center;
		border-radius: 11.76rpx;
		border: 1.17rpx solid #FFFFFF;
		background: #7DB6A8;
		justify-content: center;
		align-items: center;
		.name{
			font-size: 28.23rpx;
			line-height: 28.23rpx;
			margin-bottom: 11.76rpx;
		}
		.switch{
			width: 141.85rpx;
			height: 55.09rpx;
		}
	}
	.empty{
		background: transparent;
	}
}
</style>
